<template>
  <div>
    <el-dialog title="更换备件" :visible.sync="addReplaceShow" width="65%" :before-close="beforeClose" append-to-body>
      <div v-for="(v, i) in attachmentData" :key="i">
        <el-form :model="v" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="备件料号">
                <el-select v-model="v.item_no" :disabled='replaceInput' style="width: 100%" filterable remote clearable
                  :remote-method="getItemNo" @change="getDetails($event,i)">
                  <el-option v-for="o in attachmentList" :key="o.value" :label="o.label" :value="o.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备件编号">
                <el-select v-model="v.serial_number" :disabled='replaceInput' style="width: 100%" filterable clearable
                  @change="putNumber($event,i)">
                  <el-option v-for="o in NoList" :key="o.value" :label="o.label" :value="o.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备件规格">
                <el-input v-model="v.specifications" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="数量">
                <el-input-number v-model="v.qty" :disabled='replaceInput' :min="0">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="备注">
                <el-input type="textarea" :rows="2" v-model="v.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-top:10px">
              <el-button icon="el-icon-minus" :disabled='replaceInput' circle style="margin-left: 10%" type="danger"
                @click="remove(i)">
              </el-button>
              <el-button icon="el-icon-plus" circle :disabled='replaceInput' type="success"
                v-show="i == attachmentData.length - 1" @click="add">
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'replacePart',
  components: {},
  props: {
    attachmentData: {
      type: Array,
      default: function () {
        return []
      },
    },
    replaceInput: {
      type: Boolean,
      default: false,
    },
    addReplaceShow: {
      type: Boolean,
      default: false,
    },
    // 更换备件
    replaceData: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      submitLoading: false,
      baseUrl: this.$api.baseUrl,
      attachmentList: [],
      itemNoData: [],
      NoList: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getItemNo()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.$parent.addReplaceShow = false
      this.$parent.attachmentData = [
        {
          item_no: '',
          specifications: '',
          serial_number: '',
          qty: undefined,
          remarks: '',
        },
      ]
    },
    // 加号
    add() {
      this.$parent.attachmentData.push({
        item_no: '',
        specifications: '',
        serial_number: '',
        qty: undefined,
        remarks: '',
      })
    },
    // 减号
    remove(index) {
      if (this.$parent.attachmentData.length == 1) {
        this.$parent.attachmentData = [
          {
            item_no: '',
            specifications: '',
            serial_number: '',
            qty: undefined,
            remarks: '',
          },
        ]
        return
      }
      this.$parent.attachmentData.splice(index, 1)
    },
    // 获取备件
    getItemNo(val) {
      let Data = {
        item_no: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'Tpm/TpmPartAccount/GetList', Data, 'post').then((r) => {
        const { list } = r
        this.itemNoData = list
        this.attachmentList = list.map((i) => ({
          label: `${i.item_no} ${i.name}`,
          value: i.item_no,
        }))
      })
    },
    submit() {
      this.submitLoading = true
      let tmp = this.attachmentData.map((i) => ({
        item_no: i.item_no,
        serial_number: i.serial_number,
        qty: i.qty,
        remarks: i.remarks,
      }))
      let Data = {
        machine_id: this.replaceData.machine_id,
        executor_type: this.replaceData.executor_type,
        data: tmp,
      }
      this.$request(this.baseUrl + 'Tpm/TpmEquipmentPart/SaveTpmEquipmentPartLog', Data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.beforeClose()
          if (this.replaceData.executor_type == 3) {
            this.$parent.GetTpmEquipmentPartLogList()
          } else {
            this.$parent.$parent.GetTpmEquipmentPartLogList()
          }
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    getDetails(val, i) {
      this.attachmentData[i].qty = undefined
      let tmp = this.itemNoData.find((i) => i.item_no == val)
      this.$parent.attachmentData[i].specifications = tmp ? tmp.specifications : ''
      this.getNoList(val)
    },
    putNumber(val, i) {
      this.attachmentData[i].qty = undefined
    },
    // 获取当前料号下的编号
    getNoList(val) {
      let Data = {
        item_no: val ? val : '',
        isall: true,
        size: 100,
        page: 1,
      }
      this.$request(this.baseUrl + 'Tpm/TpmPartAccount/GetPartDetailList', Data, 'post').then((r) => {
        const { list } = r
        this.NoList = list.map((i) => ({
          label: i.serial_number,
          value: i.serial_number,
        }))
      })
    },
  },
}
</script>

<style lang="less" scoped></style>